<template>
	<view class="pageBg">
		<view class="item spaceEvenly" v-for="(item, index) in list" @click="details(item)">
			<view class="title">
				<!-- <view class="new"></view> -->
				<view class="">
					{{ item.title }}
				</view>
			</view>
			<view class="date">
				{{ item.create_time }}
			</view>
		</view>
	</view>
</template>

<script>
	import { pageScroll } from '@/utils/mixins.js';
	export default {
		mixins: [pageScroll],
		data() {
			return {
				oldList: [],
				oldData: [],
				initTimer: null,
			};
		},
		onLoad() {
			this.init();
		},
		onShow() {
			// this.clear();
			// this.initTimer = setInterval(() => {
			// 	if (this.page.count < this.page.page_no * this.page.page_size || this.page.count == this.page.page_no * this.page.page_size) {
			// 		return;
			// 	}
			// 	this.page.page_no = ++this.page.page_no;
			// 	this.init(true);
			// }, 3000);
		},
		onHide() {
			// this.clear();
		},
		onUnload() {
			// this.clear();
		},
		methods: {
			details({id}) {
				uni.navigateTo({
					url: '/pages/my/notice/details/details?id=' + id,
				});
			},
			clear() {
				if (this.initTimer) {
					clearInterval(this.initTimer);
					this.initTimer = null;
				}
			},
			async init(update) {
				const { data } = await this.$api.MssageLists({
					...this.page,
				});

				this.list = [...this.list, ...data.list];
				this.page.count = data.count;

				// if (update && JSON.stringify(this.oldData) !== JSON.stringify(data.list)) {
				// 	this.oldList = this.list;
				// 	this.oldData = data.list;

				// }
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		.item {
			width: 690rpx;
			height: 150rpx;
			background: #ffffff;
			border-radius: 20rpx;
			flex-direction: column;
			overflow: hidden;
			margin: $submargin-width auto;
			.title {
				color: #000;
				font-size: $uni-font-size-13;
				margin-left: 30rpx;
				display: flex;
				align-items: center;
				.new {
					margin-right: 9rpx;
					width: 9rpx;
					height: 9rpx;
					background: #ff0000;
					border-radius: 50%;
				}
			}
			.date {
				font-size: $uni-font-size-12;
				margin-left: 30rpx;
				color: #999;
			}
		}
	}
</style>
